<template>
  <div class="video-box">
    <video-player
      class="video-player-box"
      ref="videoPlayer"
      :options="playerOptions"
      @error="handleError"
    >
    </video-player>
    <!-- <div class="cover" v-show="isCover" @click="try2play()"></div> -->
  </div>
</template>

<script>
import 'video.js/dist/video-js.css';
import { videoPlayer } from 'vue-video-player';

import { bus } from '@/bus.js';
export default {
  name: 'vvp',
  components: {
    videoPlayer,
  },
  props: {
    poster: {
      type: String,
    },
    m3u8: {
      type: String,
    },
    rtmp: {
      type: String,
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      isCover: true,
    };
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
    playerOptions() {
      return {
        techOrder: ['flash', 'html5'],
        preload: 'auto',
        sourceOrder: true,
        sources: [
          { type: 'application/x-mpegURL', src: this.m3u8 },
          { type: 'rtmp/flv', src: this.rtmp },
        ],
        aspectRatio: '16:9',
        autoplay: true,
        controls: true,
        fluid: true,
        fullscreen: false,
        poster: this.poster,
        playsinline: true,
        notSupportedMessage: ' ',
      };
    },
  },
  methods: {
    try2play: function() {
      console.log('try');
      // console.log(this.player);
      if (this.player.error_.code == 4) {
        this.$emit('planB');
      }
      this.isCover = false;
      this.player.play();
    },
    handleError(event) {
      // 在这里处理错误
      console.error('视频播放错误:', event);
      this.$emit('planB');
      // 你可以根据 event.target.error.code 来判断具体的错误类型
      // 并采取适当的错误处理措施
    },
  },
  beforeCreate() {},
  mounted() {
    this.$nextTick(() => {
      this.player.play();
      this.try2play();
    });
    this.$refs.videoPlayer.$el.addEventListener('error', this.handleError);
  },
  beforeDestroy() {
    this.player = null;
  },
};
</script>

<style>
.video-box {
  position: relative;
}
.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.cover:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 6vw 0 6vw 10vw;
  border-color: transparent transparent transparent #fff;
}

.vjs-error .vjs-error-display:before {
  content: '';
}
</style>
